HSL color

HSL 是指色相（Hue）、饱和度（Saturation）、亮度（Lightness）三个颜色属性的一种表示方法，常用于描述和操作颜色。具体来说：

1. 色相（Hue）： 表示颜色在色谱中的位置，以角度表示，通常在 0 到 360 度之间，对应于色谱上的颜色。0 度和 360 度都表示红色，120 度表示绿色，240 度表示蓝色等。

2. 饱和度（Saturation）： 表示颜色的纯度或强度，从 0% 到 100% 的范围内，0% 表示灰色阴影，100% 表示最鲜艳的颜色。

3. 亮度（Lightness）： 表示颜色的明暗程度，同样在 0% 到 100% 的范围内，0% 表示黑色，100% 表示白色，50% 表示正常亮度。

HSL 色彩模型相对于其他表示方法（如 RGB 或 CMYK）有一些优点：

1. 直观性： HSL 更直观，更符合人眼对颜色的感知。色相表示颜色种类，饱和度表示颜色的鲜艳程度，亮度表示颜色的明亮度，这种表示方法更符合人的感觉。

2. 易于调整： 在 HSL 模型中，调整颜色的属性更加直观和方便。例如，增加亮度可以使颜色变得更明亮，减小饱和度可以使颜色变得更灰淡。

3. 色调相对性： HSL 模型在进行颜色调整时，通常能够保持颜色的整体色调相对不变。这使得在设计中更容易保持一致的配色。

总的来说，HSL 色彩模型在设计和图形处理领域中被广泛使用，因为它更符合人的感知方式，并且更容易用于调整和操纵颜色。

shadcn-ui use hsl color to define style variable

@tailwind base;
@tailwind components;
@tailwind utilities;


html,
body,
:root {
  height: 100%;
}
 

/* generated by shadcn-ui */
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 5.9% 10%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
  }
}